<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>我的分享</title>

    <style type="text/css">
        body{
            background:rgb(255,229,216);
        }
        #body1_img{
            width: 100%;
            margin: 0rem;
            display: block;
        }
        .phone{
            display: flex;
            justify-content: flex-start;
            width: 70%;
            margin: auto;
            height: 30px;
            padding: 5px 10px;
            background: white;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .mima{
            display: flex;
            justify-content: space-between;
            width: 70%;
            margin: auto;
            height: 30px;
            padding: 5px 10px;
            background: white;

        }
        .img1{
            width:10px;
            height: 20px;
            display: block;
            margin-top: 5px;

        }
        .img2{
            width: 10px;
            height: 20px;
            display: block;
            margin-top: 5px;
        }
        input{
            height: 30px;
            border: none;
            margin-left: 10px;
        }
        .mima_v1{
            display: flex;
            justify-content: flex-start;
        }
        .get{
            font-size: 15px;
            color: rgb(238,84,5);
            height: 30px;
            line-height: 30px;

        }
        .go{
            width: 60%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: auto;
            margin-top: 60px;
            background: rgb(238,84,5);
            color: white;
            font-size: 18px;
            border-radius: 100px;
            display: block;
        }
    </style>
</head>

<body>
<div id="body1">
    <img src="__STATIC__/index/pages/image/wfx.png" alt="" id="body1_img">

    <form action="" method="POST">
        <div class="phone">
            <img src="__STATIC__/index/pages/image/w1.png" alt="" class="img1">
            <input type="number" placeholder="输入手机号" name="phone" id="phoneput" value="">
        </div>
        <div class="mima">
            <div class="mima_v1">
                <img src="__STATIC__/index/pages/image/w2.png" alt="" class="img2">
                <input type="number" placeholder="验证码"  style="width:130px;" name="ma" id="mas" value="">
            </div>

            <div class="get" onclick="getma();" id="get1">获取验证码</div>
            <div class="get" id="get2"><!--60s后获取--></div>
        </div>

        <!-- <div class="go">立即领取</div> -->
        <input type="button" value="立即领取" class="go" onclick="checkUser();">
    </form>
</div>

<input type="hidden" class="chiefUserAccount" value="{$chiefUserAccount}">
<input type="hidden" class="smsCode" value="">

<script src="__STATIC__/plugins/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
<script>
    layui.use(['layer'], function(){
        var layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery;

        var phone = null;
        var ma = null;
        $(document).ready(function() {
            $("#get2").hide();
            $("#get1").show();
        });
    });

    var protocol = window.location.protocol;
    var host = protocol + '//' + window.location.host;

    /**
     * 倒计时函数
     */
    var countdown = 60;
    function settime(){
        if(countdown == 0){
            $("#get1").show();
            $("#get2").hide();
            countdown = 60;
        }else{
            $("#get2").text(countdown+'s后获取');
            countdown--;
            setTimeout(function(){settime()}, 1000);
        }
    }

    function getma() {
        phone = $("#phoneput").val();
        if( !phone) {
            layer.msg('手机号不能为空');
            return false;
        }

        $.ajax({
            type : "POST",
            url : host + "/api/sendSmsCode",
            header:"Access-Control-Allow-Origin:*",
            dataType : "json",
            data : {
                phone: phone
            },
            success : function(res) {
                if (res.status == 1) {
                    $('.smsCode').val(res.data.code);
                    $("#get1").hide();
                    $("#get2").show();
                    settime();
                } else {
                    layer.msg(res.data.msg);
                }
            },
        });
    }

    function checkUser() {
        phone = $("#phoneput").val();
        ma = $("#mas").val();

        if (!phone) {
            layer.msg('手机号不能为空');
            return false;
        }
        var mobile_reg = /^1(3|4|5|6|7|8|9)[0-9]\d{8}$/;
        if (!mobile_reg.test(phone)) {
            layer.msg('手机号格式不正确');
            return false;
        }
        if (!ma) {
            layer.msg('验证码不能为空');
            return false;
        }
        if (ma != $('.smsCode').val()) {
            layer.msg('验证码错误');
            return false;
        }

        var chiefUserAccount = $('.chiefUserAccount').val();

        $.ajax({
            type : "POST",
            url : host + "/api/user/login",
            header:"Access-Control-Allow-Origin:*",
            dataType : "json",
            data : {
                chiefUserAccount: chiefUserAccount,
                phone: phone
            },
            success : function(res) {
                if (res.status == 1) {
                    window.location.href = 'jyyx://app.mjh.com?phone=' + phone;
                } else {
                    layer.msg(res.data.msg);
                }
            },
        });
    }
</script>
</body>
</html>


